import { useRef } from "react";
import { newGoods } from "../stores/cart";
import { useAppDispatch } from "../store";

function World() {
  const nameRef = useRef<HTMLInputElement>(null);
  const priceRef = useRef<HTMLInputElement>(null);

  const dispatch = useAppDispatch();

  function handleAdd() {
    // 1. 获取输入框的内容
    //      PS ! 与 ? 的区别
    //        ! 是 TS 中一个类型断言的一个语法，断言前言的内容一定不为null或undefined
    //        ? 是 JS 中一个新语言，叫 可选链，如果前言的内容为 null 或 undefined 就不后走
    const name = nameRef.current!.value;
    const price = priceRef.current!.value;

    // 2. 调用接口，派发一个 newGoods 动作
    dispatch(
      newGoods({
        name,
        price,
      })
    );
  }

  return (
    <div>
      <h3>World</h3>
      <input ref={nameRef} type="text" placeholder="请输入商品名称" />
      <input ref={priceRef} type="text" placeholder="请输入商品价格" />
      <button onClick={handleAdd}>添加商品</button>
    </div>
  );
}

export default World;
